<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <img src="./assets/image/video15.jpg">

    <!-- 该router-view 是根据router/index.js 里的 path="/"对应的 component 来获取页面 -->
    
    <transition name="fade">
     <router-view></router-view>
    </transition>
     

    <!-- <router-view name="left"  style="width:50%;float:left;background-color:#888"></router-view>
    <router-view name="right" style="width:50%;float:right;background-color:red"></router-view> -->


  <!-- 页面中公共部分 -->
    <div class="col">页面传参：{{$route.name}}</div>
  
    <router-link to="/hi">Hi页面</router-link>|
    <router-link :to="{name:'HelloWorld', params:{class:'No.1',addr:'guanzhou'}}">Hi页面传参</router-link>|
    <router-link to="/hi/hi1">Hi1页面</router-link>|
    <router-link to="/hi/hi2">Hi2页面</router-link>
    <router-link to="/hi/hi2/hi21">Hi21页面</router-link>
<hr />
    <div>{{newNum}}</div>
    <button @click="add">+</button>
    <button @click="gthem">gthem</button>

  <hr />
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>
<hr />
<!-- <div v-for="n in 10" :key="n">{{n}}</div> -->
<input type="checkbox" id='ch1' value="baskball" v-model="hobbies">
<label for="ch1">baskball</label>
<input type="checkbox" id='ch2' value="football" v-model="hobbies">
<label for="ch2">football</label>
<input type="checkbox" id='ch3' value="vegallball" v-model="hobbies">
<label for="ch3">vegallball</label>
<br>
You select the hobbies:{{hobbies}}

<hr />
<select v-model="selected">
  <option v-for="op in opts" :key="op.id" :value="op.value">{{op.txt}}</option>
</select>  
You select the : {{selected}}

    <!-- 定义全局组件模板 -->
     <hr />
    <globaltmp post-title-sda="； 没有冒号，不是动态赋值，可赋任意类型"></globaltmp>
 
    <!-- 有冒号，用一个变量（数字，布尔值]），动态赋值 -->
    <globaltmp :postTitle="post.title"></globaltmp>
    <globaltmp :isPublised="true"></globaltmp>
    <globaltmp :ids="[234, 266, 273]"></globaltmp>
    <hr />
    <!--<panda></panda> -->
  </div>
</template>

<!-- 单页面共用js部分 -->
<script>
import Vue from 'vue'
import axios from 'axios'
import { mapMutations } from 'vuex';
import store from '@/vuex/store'

Vue.component('globaltmp',{//组件名称必须全部小写
    props:['post-title','post-title-sda','isPublised','ids'],
    template:'<div style="color:red" >用Vue.component定义全局组件模板{{postTitle}}{{postTitleSda}}{{ids}}</div>'
});

//Mixins 用法
/**
 * mixins一般有两种用途：
 *    在已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
 *    很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
 * 调用顺序: 混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两遍。
 */
var minixFunc = {
  updated:function(){
    console.log('minix 获取到的数据 '+this.num)
  }
}


export default {
  name: 'App',
  data:function(){
    return {
      hobbies:[],
      num:0,
      selected:'a',
      opts:[
        {id:1,txt:'A',value:'a'},
        {id:2,txt:'B',value:'b'},
        {id:3,txt:'C',value:'c'},
      ],
      post:{
        id:1,
        title:'hels ： '+Math.random()*100,
        content:'43ddd'
      },
      them:[]
    }
  },
  components:{//局部组件可以定义多个，所以使用components,全局组件只能一个一个定义，所以使用component
    panda:{
        template:'<div style="color:green">局部组件模板</div>'
    }
  },
   store,  // 1.引入 store实例对象
  //初始化
  created(){
    //  this.gthem();
    //this.ggthem(); // 3. 调用store.js 里的mutations方法
    //this.$store.commit('ggthem')      //同步
    this.$store.dispatch('themAction'); //异步
  },
   computed:{//预处理输出时的数据
     
    newNum:function(){
      return this.num == 0 ? this.num : '$'+this.num
    },
    
  },
  methods:{
    ...mapMutations(['ggthem']), // 2. 在methods 里引入 ggthem
  
    add:function(){
      this.num++;
    },
    gthem(){   // 3. 或 axios 独自调用外部接口
      let that = this;
      axios.get('http://localhost/').then(function(res){
        that.them = res.data
        console.log(res)
      }).catch(function(err){
        console.log(err)
      })
    }
  },
  updated:function(){
    console.log('vue inner updated func .')
  },
  mixins:[minixFunc], //mixin混入的先执行
}
</script>

<!-- 单页面共用css部分 -->
<style>
.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}
.col {
  width: 12rem;
  height: 2rem;
  background-color: #fff;
  font-size: 1rem;
  border: 0.1rem solid coral;
  text-align: left;
  line-height: 2rem;
}


#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
